<template>
<view class="input-class">
     <image :src="search" mode="scaleToFill" class="icon-class"></image>
     <input :placeholder="inputHint" @confirm="inputConfirm" style="flex:1;width:100%;padding-left:12rpx;" @input="inputListener" :value="inputValue" :type="inputType" :password="isPassword" :confirm-type="confirmType"></input>
     <image :class="isClearShow?'clearImgShow':'clearImgHide'" :src="clear" @tap="clearTap" mode="widthFix"></image>
</view>
</template>

<script>

export default {
  data() {
    return {
      isClearShow: false,
      inputValue: '',
			clear:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/50c0cb87-cc05-47e3-82d7-594886cb90fd.png',
			search:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/9b37e197-9c27-4d1a-b9cd-a4698bac146a.png'
    };
  },

  components: {},
  props: {
    inputHint: {
      type: String,
      default: '搜索'
    },
    inputType: {
      type: String,
      default: 'text'
    },
    isPassword: {
      type: Boolean,
      default: false
    },
    confirmType: {
      type: String,
      default: "done"
    }
  },
  externalClasses: ['input-class', 'icon-class'],
  methods: {
    inputListener: function (e) {
      var value = e.detail.value;
      var cursor = e.detail.cursor;

      if (value === null || value === undefined || value.length === 0) {
        this.setData({
          isClearShow: false
        });
      } else {
        this.setData({
          isClearShow: true
        });
      }

      var detail = {
        value: value,
        cursor: cursor
      };
      this.$emit('inputListener', {
        detail: detail
      });
    },
    inputConfirm: function (e) {
      var value = e.detail.value;
      var detail = {
        value: value
      };
      this.$emit('inputConfirm', {
        detail: detail
      });
    },
    clearTap: function () {
      this.setData({
        isClearShow: false,
        inputValue: ''
      });
    }
  }
};
</script>
<style>
/* components/clearInput/clearInput.wxss */

.clearInput {
     display: -webkit-flex;
     margin: 16rpx;
     padding: 8rpx 14rpx 8rpx 8rpx;
     font-size: 24rpx;
     border-radius: 16rpx;
     border: 1rpx solid gray;
     align-items: center;
}

.searchImg {
     width: 35rpx;
     height: 35rpx;
     vertical-align: center;
}

.clearImgShow {
     width: 35rpx;
     height: 35rpx;
     vertical-align: center;
}

.clearImgHide {
     display: none;
}

</style>